<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>云校通-教师-<c:choose><c:when test="${examKey == null }">新增考试</c:when><c:otherwise>考试详情</c:otherwise></c:choose></title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<body ontouchstart class="js-jf">
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
			<div class="weui-header bg-blue"> 
		  		<div class="weui-header-left"> <a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a></div>
		    	<h1 class="weui-header-title">
		    		<c:choose>
		    			<c:when test="${examKey == null }">新增考试</c:when>
		    			<c:otherwise>考试详情</c:otherwise>
		    		</c:choose>
		    	</h1>
		    	<div class="weui-header-right"> 
		    		<c:if test="${examKey != null }">
		    			<a id="action" href="javascript:;" class="f-white">修改</a >
		    		</c:if>
		    	</div>
		    </div>
			<div class="weui_cells weui_cells_form mt0">
				<div class="weui_cell">
		          	<div class="weui_cell_hd">
		          		<label class="weui_label">考试名称</label>
		          	</div>
	         		<div class="weui_cell_bd weui_cell_primary no_icon">
						<input id="examName" type="text" class="weui_input tr" placeholder="请输入考试名称" disabled="disabled" />
	      			</div>
	    		</div>
	    	</div>
			<div class="weui_cells weui_cells_form mt0" id="examGrade">
				<div class="weui_cell">
          			<div class="weui_cell_hd">
            			<label class="weui_label label3">考试年级</label>
          			</div>
          			<div class="weui_cell_bd weui_cell_primary hide" id="gradeConf">
						<input type="text" class="weui_input weui_input-select main1" value="请选择考试年级" readonly="readonly">
	          		</div>
	      		</div>
	      		<ul class="lb_show1">
	      			<li><p class="f-red">年级</p><p class="f-red">公开分数</p></li>
	      		</ul>
		      	<ul class="lb_show1" id="gradeList">
		      	</ul>
		      	<div class="t_remove">
		      		<p>请选择考试年级</p>
		      	</div>
		     </div>
		     <input type="hidden" id="examIds"/>
		     <input type="hidden" id="gradeIds"/>
		     <input type="hidden" id="regGradeIds"/>
		     <input type="hidden" id="lookScores"/>
		     <div class="weui_cells weui_cells_form mt0">
				<div class="weui_cell">
          			<div class="weui_cell_hd">
            			<label class="weui_label label3">考试科目</label>
          			</div>
	      		</div>
		      	<ul class="lb_show1" id="routineTypes">
		      		<li><p class="f-red">科目</p><p class="f-red">满分值</p></li>
		      		<li><p>语文</p><p><input class="weui_input tm score_input" type="number" pattern="[0-9]*" id="chinaScore" value="100" readonly="readonly"></p></li>
		      		<li><p>数学</p><p><input class="weui_input tm score_input" type="number" pattern="[0-9]*" id="mathScore" value="100" readonly="readonly"></p></li>
		      		<li><p>英语</p><p><input class="weui_input tm score_input" type="number" pattern="[0-9]*" id="englishScore" value="100" readonly="readonly"></p></li>
		      	</ul>
		     </div>
		     
		     <div class="weui_cells weui_cells_form mt0" id="regExamGrade">
				<div class="weui_cell">
          			<div class="weui_cell_hd">
            			<label class="weui_label label3">登分老师年级</label>
          			</div>
          			<div class="weui_cell_bd weui_cell_primary hide" id="regGradeConf">
						<input type="text" class="weui_input weui_input-select" value="请设置登分年级" readonly="readonly">
	          		</div>
	      		</div>
	      		<ul class="lb_show1">
		      		<li><p class="f-red w33">考试年级</p><p class="w33"></p><p class="f-red w33">登分年级</p></li>
		      	</ul>
		      	<ul class="lb_show1" id="regGradeList">
		      	</ul>
		      	<div class="t_remove">
		      		<p>请关联登分老师年级</p>
		      	</div>
		      	<div class="weui_cell">
          			<div class="weui_cell_hd">
            			<label class="weui_label label3">考试时间</label>
          			</div>
          			<div class="weui_cell_bd weui_cell_primary">
						<input class="weui_input right" type="text" value="" id='examDate' disabled/>
	          		</div>
	      		</div>
	      		<div class="weui_cell">
          			<div class="weui_cell_hd">
            			<label class="weui_label label3">登分截止时间</label>
          			</div>
          			<div class="weui_cell_bd weui_cell_primary">
						<input class="weui_input right" type="text" value="" id='regClosingDate' disabled/>
	          		</div>
	      		</div>
		     </div>
		     <c:if test="${examKey == null }">
			     <div class="weui_btn_area">
			        <a href="javascript:" class="weui_btn bg-blue" id="examSubmit">确认提交</a>
			     </div>
			 </c:if>
		</div>
	</div>
	
	<!-- 这里的div的class后面加上 display可以显示点击效果 -->
	<div class="hide_bd"></div>
	<div class="hb_choose type1">
      <div class="t_title">
        <h3>考试年级</h3>
        <h3>登分年级</h3>
      </div>
      <div class="c_main">
      	<ul class="lb_show1" id="regGradeShow">
      		<li class="hide" id="r1">
      			<div class="item_style">一年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="1">
	           			<option value="2">二年级</option>
	            		<option value="3">三年级</option>
	            		<option value="4">四年级</option>
	            		<option value="5">五年级</option>
	            		<option value="6">六年级</option>
            		</select>
      			</div>
      		</li>
      		<li class="hide" id="r2">
      			<div class="item_style">二年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="2">
	           			<option value="1">一年级</option>
	            		<option value="3">三年级</option>
	            		<option value="4">四年级</option>
	            		<option value="5">五年级</option>
	            		<option value="6">六年级</option>
            		</select>
      			</div>
      		</li>
      		<li class="hide" id="r3">
      			<div class="item_style">三年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="3">
	      				<option value="1">一年级</option>
	           			<option value="2">二年级</option>
	            		<option value="4">四年级</option>
	            		<option value="5">五年级</option>
	            		<option value="6">六年级</option>
            		</select>
      			</div>
      		</li>
      		<li class="hide" id="r4">
      			<div class="item_style">四年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="4">
	      				<option value="1">一年级</option>
	           			<option value="2">二年级</option>
	            		<option value="3">三年级</option>
	            		<option value="5">五年级</option>
	            		<option value="6">六年级</option>
            		</select>
      			</div>
      		</li>
      		<li class="hide" id="r5">
      			<div class="item_style">五年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="5">
	      				<option value="1">一年级</option>
	           			<option value="2">二年级</option>
	            		<option value="3">三年级</option>
	            		<option value="4">四年级</option>
	            		<option value="6">六年级</option>
            		</select>
      			</div>
      		</li>
      		<li class="hide" id="r6">
      			<div class="item_style">六年级</div>
      			<div class="item_style">
      				<select class="f16" data-key="6">
	      				<option value="1">一年级</option>
	           			<option value="2">二年级</option>
	            		<option value="3">三年级</option>
	            		<option value="4">四年级</option>
	            		<option value="5">五年级</option>
	            	</select>
      			</div>
      		</li>
      	</ul>
      </div>
      <div class="bg_white last_li border_t">
        <strong><b class="cancel">取消</b></strong>
        <strong><b class="bg-blue f-white" id="sure">确认</b></strong>
      </div>
    </div>
    <div class="hb_choose type2">
      <div class="t_title">
        <h3 class="indent">考试年级</h3>
        <h3>公开分数</h3>
      </div>
      <div class="c_main">
      	<ul class="lb_show1" id="gradeShow">
      		<li id="g1">
      			<div class="item_style">
      				<div class="weui_cell_hd" style="display: inline-flex;">
		            	<label class="weui_cells_checkbox weui_check_label" for="s1">
		            		<input type="checkbox" class="weui_check" value="1" id="s1">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>一年级					
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p1" checked>
              	</div>
      		</li>
      		<li id="g2">
      			<div class="item_style">
      				<div class="weui_cell_hd">
		            	<label class="weui_cells_checkbox weui_check_label" for="s2">
		            		<input type="checkbox" class="weui_check" value="2" id="s2">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>二年级					
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p2" checked>
              	</div>
      		</li>
      		<li id="g3">
      			<div class="item_style">
      				<div class="weui_cell_hd">
		            	<label class="weui_cells_checkbox weui_check_label" for="s3">
		            		<input type="checkbox" class="weui_check" value="3" id="s3">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>三年级					
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p3" checked>
              	</div>
      		</li>
      		<li id="g4">
      			<div class="item_style">
      				<div class="weui_cell_hd">
		            	<label class="weui_cells_checkbox weui_check_label" for="s4">
		            		<input type="checkbox" class="weui_check" value="4" id="s4">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>四年级					
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p4" checked>
              	</div>
      		</li>
      		<li id="g5">
      			<div class="item_style">
      				<div class="weui_cell_hd">
		            	<label class="weui_cells_checkbox weui_check_label" for="s5">
		            		<input type="checkbox" class="weui_check" value="5" id="s5">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>五年级					
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p5">
              	</div>
      		</li>
      		<li id="g6">
      			<div class="item_style">
      				<div class="weui_cell_hd">
		            	<label class="weui_cells_checkbox weui_check_label" for="s6">
		            		<input type="checkbox" class="weui_check" value="6" id="s6">	    						
		            		<i class="weui_icon_checked"></i>				
		            	</label>六年级
		           	</div>
				</div>
      			<div class="item_style">
      				<input class="weui_switch" type="checkbox" id="p6">
              	</div>
      		</li>
      	</ul>
      </div>
      <div class="bg_white last_li border_t">
        <strong><b class="cancel">取消</b></strong>
        <strong><b class="bg-blue f-white" id="sure2">确认</b></strong>
      </div>
    </div>
	
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script>
	var examKey = emptyToNull("${examKey}");
    $(function(){
    	var nowDate = getTime(new Date(), 'yyyy-MM-dd');
    	$("#examDate").datetimePicker({title:"选择考试时间",min:nowDate,max:'2050-10-01'});
        $("#regClosingDate").datetimePicker({title:"选择登分截止时间",min:nowDate,max:'2050-10-01'});
	   	$('#gradeConf').click(function(){
	   		loadMaskGrade();
	 		$('.hide_bd').attr("style", "display: block");
	 		$('.type2').show();
	 	});
	   	$('#regGradeConf').click(function(){
	   		loadMaskRegGrade();
	 		$('.hide_bd').attr("style", "display: block");
	 		$('.type1').show();
	 	});
   	 	$("#action").click(function() {
   	 		var text = $(this).html();
   	 		if(text == '修改') {
   	 			initPage();
   	 			$(this).html("保存");
   	 		}else if(text == "保存") {
   	 			examSubmit();
   	 		}
   	 	});
	   	
	   	$('.last_li .cancel').click(function(){
    		$('.hide_bd').attr("style", "display: none");
    		$('.type2').hide();
    		$('.type1').hide();
    	});
	   	$(".type1 #sure").click(function() {
	   		var regGradeIds = "";
	   		$("#regGradeShow li select").each(function(i, v){
	   			var value = $(v).val();
	   			if(value.length > 0) {
	   				regGradeIds += $(v).attr("data-key") + "-" + value + ",";
	   			}
	   		});
	   		if(regGradeIds.length > 0) {
   				regGradeIds = regGradeIds.substr(0,regGradeIds.length-1);
   			}
	   		loadRegGrade($("#gradeIds").val(), regGradeIds);
   			$('.hide_bd').attr("style", "display: none");
	 		$('.type1').hide();
	   	})
	   	$(".type2 #sure2").click(function() {
	   		var gradeIds = "";
	   		var lookScores = "";
	   		var length = $(".lb_show1").find("li input.weui_check:checked").length;
	   		$(".lb_show1").find("li input.weui_check:checked").each(function(i, v) {
	   			gradeIds += $(v).val() + ((i+1) < length ? "," : "");
	   			var switchCheck = $(v).closest("li").find("input.weui_switch")[0];
	   			lookScores += (switchCheck.checked == true ? 1 : 0) + ((i+1) < length ? "," : "");
	   		})
	   		loadGrade(gradeIds, lookScores);
	   		loadRegGrade(gradeIds, null);
	   		$('.hide_bd').attr("style", "display: none");
	 		$('.type2').hide();
	   	})
	   	if(examKey == null) {
	   		initPage();
	   	}
	   	$("#examSubmit").click(function() {
	   		examSubmit();
	   	})
	   	loadItem();
	});
    function initPage() {
    	$("#examName").attr("disabled",null);
    	$("#examDate").attr("disabled",null);
    	$("#regClosingDate").attr("disabled",null);
		$("#gradeConf").show();
		$("#regGradeConf").show();
		$(".score_input").addClass("weui_input_border").attr("readonly",null);
    }
    function loadItem() {
    	if(examKey == null) return;
    	$.ajax({
    		url: basePath + "/ls/exam/score/examDetail/query",
    		type: 'POST',
    		dataType : "json",
    		data: {
    			examKey: examKey
    		},
    		success: function(data) {
    			if(data != null) {
    				$("#examName").val(data[0].examName);
    				$("#examDate").val(getTime(data[0].examTime, 'yyyy-MM-dd hh:mm'));
    				$("#regClosingDate").val(getTime(data[0].regClosingTime, 'yyyy-MM-dd hh:mm'));
    				var scoreA = data[0].cmeFullScore.split(",");
    				$("#chinaScore").val(scoreA[0]);
    				$("#mathScore").val(scoreA[1]);
    				$("#englishScore").val(scoreA[2]);
    				$("#gradeShow li").hide();
    				$("#gradeShow .weui_check_label").hide();
    				var gradeIds = "", regGradeIds = "", lookScores = "";
    				for(var i in data) {
    					var itm = data[i];
    					$("#s" + itm.gradeId).attr("exam-id", itm.id);
    					gradeIds += itm.gradeId + ((parseInt(i) + 1) < data.length ? "," : "");
    					lookScores += (itm.lookScore == '√' ? 1 : 0) + ((parseInt(i) + 1) < data.length ? "," : "");
    					regGradeIds += itm.gradeId + "-" + itm.regGradeId + ((parseInt(i) + 1) < data.length ? "," : "");
    					$("#g" + itm.gradeId).show();
    				}
    				$("#gradeIds").val(gradeIds);
					$("#lookScores").val(lookScores);
					$("#regGradeIds").val(regGradeIds);
					loadGrade(gradeIds, lookScores);
					loadRegGrade(gradeIds, regGradeIds)
    			}
    		},
    		error: function(data) {
    			alert("系统异常,请联系管理员");
    		}
    	});
    }
    
    function loadMaskGrade() {
    	var gradeIds = emptyToNull($("#gradeIds").val());
    	var lookScores = emptyToNull($("#lookScores").val());
    	$(".lb_show1").find("li input.weui_check:checked").each(function(i, v) {
    		$(v)[0].checked = null;
    	});
    	$(".lb_show1").find("li input.weui_switch").each(function(i, v) {
    		$(v)[0].checked = true;
    	});
    	$("#p5")[0].checked = null;
    	$("#p6")[0].checked = null;
    	if(gradeIds != null) {
			var gradeIdsA = gradeIds.split(",");
			var lookScoresA = lookScores.split(",");
			for(var i in gradeIdsA) {
				$("#s" + gradeIdsA[i])[0].checked = true;
				if(lookScoresA[i] == 1) {
					$("#p" + gradeIdsA[i])[0].checked = true;
				}else {
					$("#p" + gradeIdsA[i])[0].checked = null;
				}
			}
    	}
   }
    function loadGrade(gradeIds, lookScores) {
    	$("#gradeIds").val(gradeIds);
    	$("#lookScores").val(lookScores);
    	if(gradeIds != null && gradeIds.length > 0) {
			var gradeIdsA = gradeIds.split(",");
			var lookScoresA = lookScores.split(",");
			var gradeHtml = "";
			for(var i in gradeIdsA) {
				var itm = gradeIdsA[i];
				gradeHtml += '<li><p>'+getGradeName(itm)+'</p><p><i'+(lookScoresA[i] == 1 ? ' class="weui_icon_success_no_circle"' : ' class="icon icon-95 f-23 f-red"')+'></i></p></li>';
			}
			$("#gradeList").html(gradeHtml);
			$("#examGrade .t_remove").hide();
		}else {
			$("#gradeList").html('');
			$("#examGrade .t_remove").show();
		}
   }
    function loadMaskRegGrade() {
    	var gradeIds = emptyToNull($("#gradeIds").val());
    	var regGradeIds = emptyToNull($("#regGradeIds").val());
    	$("#regGradeShow").find("select").each(function(i, v) {
    		$(v).val("");
    	});
    	$("#regGradeShow").find("li").each(function(i, v) {
    		$(v).hide();
    	});
    	if(gradeIds != null) {
			var gradeIdsA = gradeIds.split(",");
			for(var i in gradeIdsA) {
				$("#r" + gradeIdsA[i]).closest("li").show();
				if(regGradeIds != null) {
					var regGradeIdsA = regGradeIds.split(",");
					for(var j in regGradeIdsA){
						var array = regGradeIdsA[j].split("-");
						if(array[0] == gradeIdsA[i]) {
							$($($("#r" + gradeIdsA[i]).find("select"))[0]).val(array[1]);
							break;
						}
					}
				}
			}
    	}
   }
   function loadRegGrade(gradeIds, regGradeIds) {
	   if(regGradeIds == null) {
		   regGradeIds = $("#regGradeIds").val();
	   }else {
		   $("#regGradeIds").val(regGradeIds);
	   }
	   if(gradeIds != null && gradeIds.length > 0) {
			var gradeIdsA = gradeIds.split(",");
			var regGradeIdsA = regGradeIds.split(",");
			var gradeHtml = "";
			for(var i in gradeIdsA) {
				var itm = gradeIdsA[i];
				var itm1 = null;
				for(var j in regGradeIdsA){
					var array = regGradeIdsA[j].split("-");
					if(array[0] == itm) {
						itm1 = array[1];
						break;
					}
				}
				gradeHtml += '<li><p class="w33">'+getGradeName(itm)+'</p><p class="w33 link_icon"><span></span><span class="i_icon_con"></span><span></span></p><p class="w33'+(itm1==null ? " f-red":"")+'">'+(itm1==null?"未设置" : getGradeName(itm1))+'</p></li>';
			}
			$("#regGradeList").html(gradeHtml);
			$("#regExamGrade .t_remove").hide();
		}else {
			$("#regGradeList").html('');
			$("#regExamGrade .t_remove").show();
		}
   }
   
   function examSubmit() {
	   var examName = emptyToNull($("#examName").val());
	   if(examName == null) {
		   $.alert("考试名称不能为空","");
		   return;
	   }
	   var gradeIds = emptyToNull($("#gradeIds").val());
	   if(gradeIds == null) {
		   $.alert("请设置考试年级","");
		   return;
	   }
	   var examIds = null;
	   if(examKey != null) {
		   examIds = "";
		   var arry = gradeIds.split(",");
		   for(var i in arry) {
			   examIds += $("#s" + arry[i]).attr("exam-id") + ((parseInt(i) + 1) < arry.length ? "," : "");
		   }
	   }
	   var lookScores = emptyToNull($("#lookScores").val());
	   var chinaScore = emptyToNull($("#chinaScore").val());
	   var mathScore = emptyToNull($("#mathScore").val());
	   var englishScore = emptyToNull($("#englishScore").val());
	   if(chinaScore == null || mathScore == null || englishScore == null) {
		   $.alert("请设置考试科目满分值","");
		   return;
	   }
	   var cmeFullScore = chinaScore + "," + mathScore + "," + mathScore;
	   var regGradeIds = getRegGradeIds();
	   if(regGradeIds == null) {
		   $.alert("请设置登分年级","");
		   return;
	   }
	   var examDate = emptyToNull($("#examDate").val());
	   if(examDate == null) {
		   $.alert("请设置考试时间","");
		   return;
	   }
	   var regClosingDate = emptyToNull($("#regClosingDate").val());
	   if(regClosingDate == null) {
		   $.alert("请设置登分截至时间","");
		   return;
	   }
	   $.ajax({
	   		url: basePath + "/ls/exam/score/exam/addUpdate",
	   		type: 'POST',
	   		dataType : "json",
	   		data: {
	   			examKey: examKey,
	   			examIds: examIds,
	   			gradeIds: gradeIds,
	   			regGradeIds: regGradeIds,
	   			lookScores: lookScores,
	   			examDate: examDate,
	   			regClosingDate: regClosingDate,
	   			examName: examName,
	   			cmeFullScore: cmeFullScore
	   		},
	   		success: function(data) {
	   			if (data.code == '000') {
	   				$.toast("保存成功");
	   				window.location.href = basePath + "/ls/exam/score/examList";
	   			}else {
	   				$.toast(data.msg, "cancel");
	   			}
	   		},
	   		error: function(data) {
	   			alert("系统异常,请联系管理员");
	   		}
	   });
   }
   function getRegGradeIds() {
	   var gradeIds = emptyToNull($("#gradeIds").val());
	   var regGradeIds = emptyToNull($("#regGradeIds").val());
	   if(regGradeIds == null) return null;
	   var array1 = gradeIds.split(",");
	   var array2 = regGradeIds.split(",");
	   if(array1.length != array2.length) {
		   return null;
	   }
	   var result = "";
	   for(var i in array2) {
		   var arry = array2[i].split("-");
		   result += arry[1] + ((parseInt(i)+1) < array2.length ? "," : "");
	   }
	   return result;
   }
   
   function getGradeName(id) {
	   if(id == 1) return "一年级";
	   else if(id == 2) return "二年级";
	   else if(id == 3) return "三年级";
	   else if(id == 4) return "四年级";
	   else if(id == 5) return "五年级";
	   else if(id == 6) return "六年级";
   }
</script>
</html>